<!DOCTYPE html>
<html>
<head>
<title>Velocity Profile Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="450" style="background-color: #fff;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 20px "Times New Roman"';
    ctx.textBaseline = 'middle';

    // Coordinate system parameters
    const originX = 120;
    const originY = 225;
    const zAxisTop = 50;
    const zAxisBottom = 400;
    const vAxisEnd = 380;

    // --- Draw Axes ---
    ctx.beginPath();
    // Z-axis (vertical)
    ctx.moveTo(originX, zAxisBottom);
    ctx.lineTo(originX, zAxisTop);
    // Arrow head for Z-axis
    ctx.moveTo(originX, zAxisTop);
    ctx.lineTo(originX - 6, zAxisTop + 12);
    ctx.moveTo(originX, zAxisTop);
    ctx.lineTo(originX + 6, zAxisTop + 12);
    
    // V-axis (horizontal)
    ctx.moveTo(originX, originY);
    ctx.lineTo(vAxisEnd, originY);
    // Arrow head for V-axis
    ctx.moveTo(vAxisEnd, originY);
    ctx.lineTo(vAxisEnd - 12, originY - 6);
    ctx.moveTo(vAxisEnd, originY);
    ctx.lineTo(vAxisEnd - 12, originY + 6);
    ctx.stroke();

    // --- Draw Labels for Axes and Origin ---
    ctx.textAlign = 'center';
    ctx.fillText('z', originX, zAxisTop - 20);
    ctx.fillText('v', vAxisEnd + 20, originY);
    ctx.fillText('O', originX - 20, originY - 20);

    // --- Draw the Graph ---
    // Graph parameters to match the image proportions
    const v0_offset = 50;
    const zs_val = 120;
    const v_increase = 90;

    const p0 = { x: originX + v0_offset, y: originY };
    const p_top = { x: originX + v0_offset + v_increase, y: originY - zs_val };
    const p_bottom = { x: originX + v0_offset + v_increase, y: originY + zs_val };

    // Draw the main graph lines (the '>' shape)
    ctx.beginPath();
    ctx.moveTo(p_top.x, p_top.y);
    ctx.lineTo(p0.x, p0.y);
    ctx.lineTo(p_bottom.x, p_bottom.y);
    ctx.stroke();

    // --- Draw Dashed Lines and Labels ---
    ctx.save();
    ctx.lineWidth = 1.5;
    ctx.setLineDash([6, 4]);

    // Top dashed line from z-axis to the graph
    ctx.beginPath();
    ctx.moveTo(originX, p_top.y);
    ctx.lineTo(p_top.x, p_top.y);
    ctx.stroke();

    // Bottom dashed line from z-axis to the graph
    ctx.beginPath();
    ctx.moveTo(originX, p_bottom.y);
    ctx.lineTo(p_bottom.x, p_bottom.y);
    ctx.stroke();

    ctx.restore(); // Restore solid line style

    // --- Labels for specific points on the graph ---
    ctx.textAlign = 'center';
    // Using Unicode for subscript '0'
    ctx.fillText('v\u2080', p0.x, originY + 25); 

    ctx.textAlign = 'right';
    // Using Unicode for subscript 's'
    ctx.fillText('z\u209B', originX - 15, p_top.y); 
    ctx.fillText('-z\u209B', originX - 15, p_bottom.y); 

    // --- Add Caption ---
    ctx.font = '22px "KaiTi", "SimSun", sans-serif'; // Standard Chinese fonts
    ctx.textAlign = 'left';
    ctx.textBaseline = 'bottom';
    ctx.fillText('力图 7.35.1', originX, zAxisBottom + 20);
</script>

</body>
</html>